<template>
  <view class="register-page">
    <!-- 顶部步骤条 -->
    <view class="steps">
      <view class="step" :class="{ active: currentStep >= 1, completed: currentStep > 1 }">
        <view class="step-number">{{ currentStep > 1 ? '✓' : '1' }}</view>
        <text class="step-text">基本信息</text>
      </view>
      <view class="step" :class="{ active: currentStep >= 2, completed: currentStep > 2 }">
        <view class="step-number">{{ currentStep > 2 ? '✓' : '2' }}</view>
        <text class="step-text">资质证明</text>
      </view>
      <view class="step" :class="{ active: currentStep >= 3, completed: currentStep > 3 }">
        <view class="step-number">{{ currentStep > 3 ? '✓' : '3' }}</view>
        <text class="step-text">服务协议</text>
      </view>
      <view class="step" :class="{ active: currentStep >= 4 }">
        <view class="step-number">4</view>
        <text class="step-text">提交审核</text>
      </view>
    </view>

    <!-- 步骤1：基本信息 -->
    <view v-if="currentStep === 1" class="step-content">
      <view class="section-title">基本信息</view>
      
      <view class="form-item">
        <text class="label">姓名</text>
        <input class="input" v-model="form.name" placeholder="请输入真实姓名" />
      </view>

      <view class="form-item">
        <text class="label">性别</text>
        <radio-group @change="onGenderChange">
          <label class="radio-item">
            <radio value="男" :checked="form.gender === '男'" />
            <text>男</text>
          </label>
          <label class="radio-item">
            <radio value="女" :checked="form.gender === '女'" />
            <text>女</text>
          </label>
          <label class="radio-item">
            <radio value="其他" :checked="form.gender === '其他'" />
            <text>其他</text>
          </label>
        </radio-group>
      </view>

      <view class="form-item">
        <text class="label">年龄</text>
        <input class="input" v-model="form.age" type="number" placeholder="请输入年龄" />
      </view>

      <view class="form-item">
        <text class="label">联系电话</text>
        <input class="input" v-model="form.phone" type="number" placeholder="请输入手机号码" />
      </view>

      <view class="form-item">
        <text class="label">身份证号</text>
        <input class="input" v-model="form.idCard" placeholder="请输入身份证号码" />
        <text class="hint">请填写真实身份证号，用于身份验证</text>
      </view>

      <view class="form-item">
        <text class="label">个人简介</text>
        <textarea class="textarea" v-model="form.bio" placeholder="请输入个人简介，如专业特长、工作经历、服务理念等（选填）" maxlength="500" />
        <text class="hint">{{ form.bio ? form.bio.length : 0 }}/500</text>
      </view>

      <view class="tip">完成基本信息后，您还需要上传资质证明</view>

      <view class="btn-group">
        <button class="btn btn-primary" @tap="nextStep">下一步</button>
      </view>
    </view>

    <!-- 步骤2：资质证明上传 -->
    <view v-if="currentStep === 2" class="step-content">
      <view class="section-title">资质证明上传</view>

      <view class="form-item">
        <text class="label">专业资格证书</text>
        <view class="upload-box" @tap="uploadCertificate">
          <view v-if="!form.certificate" class="upload-placeholder">
            <text class="icon">📷</text>
            <text class="text">点击上传资格证书照片</text>
            <text class="hint">如攀岩教练证、登山证等，支持JPG、PNG格式</text>
          </view>
          <image v-else :src="form.certificate" class="upload-image" mode="aspectFit" />
        </view>
      </view>

      <view class="form-item">
        <text class="label">个人简历</text>
        <view class="upload-box" @tap="uploadResume">
          <view v-if="!form.resume" class="upload-placeholder">
            <text class="icon">📄</text>
            <text class="text">点击上传个人简历</text>
            <text class="hint">支持PDF、Word格式，大小不超过10MB</text>
          </view>
          <view v-else class="file-uploaded">
            <text class="icon">✓</text>
            <text class="text">简历已上传</text>
          </view>
        </view>
      </view>

      <view class="tip">完成基本信息后，您还需要上传资质证明</view>

      <view class="btn-group">
        <button class="btn btn-default" @tap="prevStep">上一步</button>
        <button class="btn btn-primary" @tap="nextStep">下一步</button>
      </view>
    </view>

    <!-- 步骤3：服务协议 -->
    <view v-if="currentStep === 3" class="step-content">
      <view class="section-title">陪爬服务协议</view>

      <view class="agreement-content">
        <view class="agreement-section">
          <text class="agreement-title">一、服务内容与范围</text>
          <text class="agreement-text">1.1 甲方（服务提供方）同意为乙方（用户）提供陪爬服务，包括但不限于登山路线规划、安全指导、装备建议等。</text>
          <text class="agreement-text">1.2 服务时间为双方约定的时间段，具体以订单确认为准。</text>
        </view>

        <view class="agreement-section">
          <text class="agreement-title">二、双方权利与义务</text>
          <text class="agreement-text">2.1 甲方应保证具备相应的陪爬资质和经验，提供安全、专业的服务。</text>
          <text class="agreement-text">2.2 乙方应如实提供个人健康状况信息，遵守甲方的安全指导。</text>
        </view>

        <view class="agreement-section">
          <text class="agreement-title">三、安全责任</text>
          <text class="agreement-text">3.1 甲方应尽到安全保障义务，但不对不可抗力导致的意外负责。</text>
          <text class="agreement-text">3.2 乙方应自行承担因个人健康状况或不遵守安全指导导致的风险。</text>
        </view>

        <view class="agreement-section">
          <text class="agreement-title">四、协议生效与终止</text>
          <text class="agreement-text">4.1 本协议自双方确认同意之日起生效。</text>
          <text class="agreement-text">4.2 服务结束后，本协议自动终止。</text>
        </view>
      </view>

      <view class="checkbox-wrapper">
        <label class="checkbox-item" @tap="toggleAgreement">
          <checkbox :checked="form.agreedToTerms" />
          <text class="checkbox-text">我已阅读并同意《陪爬服务协议》的所有条款</text>
        </label>
      </view>

      <view class="btn-group">
        <button class="btn btn-default" @tap="prevStep">上一步</button>
        <button class="btn btn-primary" @tap="nextStep" :disabled="!form.agreedToTerms">下一步</button>
      </view>
    </view>

    <!-- 步骤4：提交审核 -->
    <view v-if="currentStep === 4" class="step-content">
      <view class="confirm-icon">✓</view>
      <view class="section-title">申请信息确认</view>

      <view class="confirm-section">
        <text class="confirm-title">基本信息</text>
        <view class="confirm-item">
          <text class="label">姓名：</text>
          <text class="value">{{ form.name }}</text>
        </view>
        <view class="confirm-item">
          <text class="label">年龄：</text>
          <text class="value">{{ form.age }}</text>
        </view>
        <view class="confirm-item">
          <text class="label">电话：</text>
          <text class="value">{{ maskPhone(form.phone) }}</text>
        </view>
        <view class="confirm-item">
          <text class="label">身份证号：</text>
          <text class="value">{{ maskIdCard(form.idCard) }}</text>
        </view>
      </view>

      <view class="confirm-section">
        <text class="confirm-title">资质证明</text>
        <view class="confirm-item-check">
          <text class="icon-check">✓</text>
          <text class="text">攀岩教练资格证已上传</text>
        </view>
        <view class="confirm-item-check">
          <text class="icon-check">✓</text>
          <text class="text">个人简历已上传</text>
        </view>
      </view>

      <view class="confirm-section">
        <text class="confirm-title">服务协议已确认</text>
        <view class="confirm-item-check">
          <text class="icon-check">✓</text>
          <text class="text">您已阅读并同意《陪爬服务协议》的所有条款</text>
        </view>
      </view>

      <view class="info-box">
        <view class="info-title">📋 审核说明</view>
        <view class="info-item">› 提交申请后，我们将在3-5个工作日内完成审核</view>
        <view class="info-item">› 审核结果将通过短信通知您，请保持手机畅通</view>
        <view class="info-item">› 审核通过后，您将获得陪爬员服务资格</view>
      </view>

      <view class="tip">完成基本信息后，您还需要上传资质证明</view>

      <view class="btn-group">
        <button class="btn btn-default" @tap="prevStep">返回修改</button>
        <button class="btn btn-primary" @tap="submitApplication">提交申请</button>
      </view>
    </view>

    <!-- 底部占位 -->
    <view class="tabbar-placeholder"></view>
    
    <!-- 底部 Tabbar -->
    <custom-tabbar :active="-1" />
  </view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { applyClimber, submitQualification } from '@/api/climber'
import store from '@/store'
import { getToken } from '@/utils/auth'

export default {
  components: { CustomTabbar },
  data() {
    return {
      currentStep: 1,
      isLoggedIn: false, // 是否已登录（区分是新用户申请还是配爬员补充资质）
      form: {
        name: '',
        gender: '男',
        age: '',
        phone: '',
        idCard: '',
        bio: '', // 个人简介
        certificate: '',
        resume: '',
        agreedToTerms: false
      }
    }
  },
  onLoad() {
    // 检查是否已登录
    this.isLoggedIn = !!getToken()
  },
  methods: {
    nextStep() {
      // 验证当前步骤
      if (this.currentStep === 1) {
        if (!this.form.name || !this.form.age || !this.form.phone || !this.form.idCard) {
          this.$modal.showToast('请完整填写基本信息')
          return
        }
        if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
          this.$modal.showToast('请输入正确的手机号')
          return
        }
        if (!/^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(this.form.idCard)) {
          this.$modal.showToast('请输入正确的身份证号')
          return
        }
      }
      
      if (this.currentStep === 2) {
        if (!this.form.certificate || !this.form.resume) {
          this.$modal.showToast('请上传资质证明和个人简历')
          return
        }
      }

      if (this.currentStep === 3) {
        if (!this.form.agreedToTerms) {
          this.$modal.showToast('请先阅读并同意服务协议')
          return
        }
      }

      if (this.currentStep < 4) {
        this.currentStep++
      }
    },
    prevStep() {
      if (this.currentStep > 1) {
        this.currentStep--
      }
    },
    onGenderChange(e) {
      this.form.gender = e.detail.value
    },
    toggleAgreement() {
      this.form.agreedToTerms = !this.form.agreedToTerms
    },
    uploadCertificate() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.form.certificate = res.tempFilePaths[0]
          this.$modal.showToast('证书照片已选择')
        }
      })
    },
    uploadResume() {
      // 模拟文件上传
      this.form.resume = 'resume.pdf'
      this.$modal.showToast('简历已选择')
    },
    maskPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    maskIdCard(idCard) {
      if (!idCard) return ''
      return idCard.replace(/^(.{6})(?:\d+)(.{4})$/, '$1**********$2')
    },
    async submitApplication() {
      // 根据是否登录显示不同的提示内容
      const modalConfig = this.isLoggedIn ? {
        title: '确认提交',
        content: '确认提交资质审核申请吗？'
      } : {
        title: '确认提交',
        content: '确认提交配爬员入驻申请吗？提交后系统将自动为您创建账号，账号为您的手机号，初始密码为手机号后6位。'
      }
      
      uni.showModal({
        title: modalConfig.title,
        content: modalConfig.content,
        success: async (res) => {
          if (res.confirm) {
            try {
              // 准备提交数据
              const submitData = {
                name: this.form.name,
                phone: this.form.phone,
                idCard: this.form.idCard,
                gender: this.form.gender,
                age: this.form.age,
                bio: this.form.bio, // 个人简介
                certificate: this.form.certificate,
                resume: this.form.resume
              }

              // 根据登录状态调用不同的API
              const response = this.isLoggedIn 
                ? await submitQualification(submitData)  // 已登录配爬员：更新资质
                : await applyClimber(submitData)         // 新用户：创建账号并申请
              
              if (response.code === 200) {
                // 根据是否登录显示不同的成功提示
                if (this.isLoggedIn) {
                  // 已登录的配爬员补充资质
                  uni.showModal({
                    title: '提交成功',
                    content: '审核已提交，预计1-3个工作日内返回结果，请关注消息中心。',
                    showCancel: false,
                    success: () => {
                      uni.navigateBack()
                    }
                  })
                } else {
                  // 新用户申请配爬员
                  this.$modal.showToast('注册成功！审核已提交，后续关注消息中心。账号：' + this.form.phone + '，初始密码为手机号后6位')
                  setTimeout(() => {
                    uni.reLaunch({ url: '/pages/login' })
                  }, 2500)
                }
              } else {
                this.$modal.showToast(response.msg || '提交失败，请重试')
              }
            } catch (error) {
              console.error('提交申请失败:', error)
              this.$modal.showToast('提交失败，请检查网络连接')
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.register-page {
  min-height: 100vh;
  background: #f5f6f7;
  padding-bottom: 40rpx;
}

/* 步骤条 */
.steps {
  display: flex;
  justify-content: space-between;
  padding: 40rpx 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 68rpx;
  left: 80rpx;
  right: 80rpx;
  height: 4rpx;
  background: #e5e7eb;
  z-index: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  flex: 1;
}

.step-number {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #e5e7eb;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 28rpx;
  margin-bottom: 12rpx;
}

.step.active .step-number {
  background: #3b82f6;
  color: #fff;
}

.step.completed .step-number {
  background: #10b981;
  color: #fff;
}

.step-text {
  font-size: 24rpx;
  color: #6b7280;
}

.step.active .step-text {
  color: #3b82f6;
  font-weight: 600;
}

/* 步骤内容 */
.step-content {
  background: #fff;
  margin: 0 32rpx;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 700;
  margin-bottom: 32rpx;
  color: #1f2937;
}

/* 表单项 */
.form-item {
  margin-bottom: 32rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #374151;
  margin-bottom: 16rpx;
  font-weight: 600;
}

.input {
  width: 100%;
  height: 88rpx;
  background: #f9fafb;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  border: 2rpx solid #e5e7eb;
  box-sizing: border-box;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  background: #f9fafb;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 28rpx;
  border: 2rpx solid #e5e7eb;
  box-sizing: border-box;
  line-height: 1.6;
}

.hint {
  display: block;
  font-size: 22rpx;
  color: #9ca3af;
  margin-top: 12rpx;
}

.radio-item {
  display: inline-flex;
  align-items: center;
  margin-right: 40rpx;
  font-size: 28rpx;
}

.radio-item text {
  margin-left: 8rpx;
}

/* 上传框 */
.upload-box {
  border: 2rpx dashed #d1d5db;
  border-radius: 12rpx;
  padding: 40rpx;
  background: #f9fafb;
  margin-top: 16rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.upload-placeholder .icon {
  font-size: 80rpx;
  margin-bottom: 16rpx;
}

.upload-placeholder .text {
  font-size: 28rpx;
  color: #374151;
  margin-bottom: 8rpx;
}

.upload-placeholder .hint {
  font-size: 22rpx;
  color: #9ca3af;
}

.upload-image {
  width: 100%;
  height: 400rpx;
  border-radius: 8rpx;
}

.file-uploaded {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.file-uploaded .icon {
  width: 48rpx;
  height: 48rpx;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  font-size: 32rpx;
}

.file-uploaded .text {
  font-size: 28rpx;
  color: #10b981;
}

/* 协议内容 */
.agreement-content {
  max-height: 800rpx;
  overflow-y: scroll;
  border: 2rpx solid #e5e7eb;
  border-radius: 12rpx;
  padding: 32rpx;
  background: #f9fafb;
  margin-bottom: 32rpx;
}

.agreement-section {
  margin-bottom: 32rpx;
}

.agreement-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.agreement-text {
  display: block;
  font-size: 26rpx;
  color: #4b5563;
  line-height: 44rpx;
  margin-bottom: 12rpx;
}

.checkbox-wrapper {
  margin-bottom: 32rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background: #fff;
  border: 2rpx solid #3b82f6;
  border-radius: 12rpx;
}

.checkbox-text {
  margin-left: 16rpx;
  font-size: 26rpx;
  color: #3b82f6;
}

/* 确认页面 */
.confirm-icon {
  width: 120rpx;
  height: 120rpx;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80rpx;
  margin: 0 auto 32rpx;
}

.confirm-section {
  margin-bottom: 40rpx;
  padding-bottom: 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.confirm-title {
  display: block;
  font-size: 28rpx;
  color: #6b7280;
  margin-bottom: 16rpx;
}

.confirm-item {
  display: flex;
  margin-bottom: 16rpx;
}

.confirm-item .label {
  color: #6b7280;
  margin-right: 16rpx;
  font-weight: 400;
}

.confirm-item .value {
  color: #1f2937;
  font-weight: 600;
}

.confirm-item-check {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.icon-check {
  width: 36rpx;
  height: 36rpx;
  background: #10b981;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
  font-size: 24rpx;
}

.confirm-item-check .text {
  font-size: 26rpx;
  color: #374151;
}

.info-box {
  background: #eff6ff;
  border-left: 4rpx solid #3b82f6;
  padding: 24rpx;
  border-radius: 8rpx;
  margin-bottom: 32rpx;
}

.info-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 16rpx;
}

.info-item {
  font-size: 24rpx;
  color: #1e40af;
  line-height: 40rpx;
  margin-bottom: 8rpx;
}

/* 提示 */
.tip {
  text-align: center;
  font-size: 24rpx;
  color: #9ca3af;
  margin: 32rpx 0;
}

/* 按钮组 */
.btn-group {
  display: flex;
  gap: 24rpx;
  margin-top: 40rpx;
}

.btn {
  flex: 1;
  height: 88rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 600;
  border: none;
}

.btn-default {
  background: #f3f4f6;
  color: #374151;
}

.btn-primary {
  background: #3b82f6;
  color: #fff;
}

.btn-primary[disabled] {
  background: #d1d5db;
  color: #9ca3af;
}

/* 底部占位 */
.tabbar-placeholder {
  height: 120rpx;
}
</style>

